<template>
  <div class="tenke">
    <div class="content-wrap">
        <div class="title"><span>腾科认证体系</span> <span class="title-text">首页 > 腾科认证体系</span></div>
        <div class="conetnt-wrap">
          <div class="list" >
            <div class="list-wrap" v-for="(item,index) in listdata" :key="index">
                 <div class="list-content">{{item.text}}</div>
            </div>
          </div>
          <div class="details1">
            <div class="details-title">云计算</div>
            <p class="details-item01">
              云计算（cloud computing）是分布式计算的一种，指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序，然后，
                通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。云计算早期，简单地说，
                就是简单的分布式计算，解决任务分发，并进行计算结果的合并。因而，云计算又称为网格计算。通过这项技术，
                可以在很短的时间内（几秒种）完成对数以万计的数据的处理，从而达到强大的网络服务。<br/><br/>
              现阶段所说的云服务已经不单单是一种分布式计算，而是分布式计算、效用计算、负载均衡、并行计算、网络存储、热备份冗杂和虚拟化等计算机技术混合演进并跃升的结果。
            </p>
            <div class="firm-title">厂商</div>
            <div class="firm-text-wrap" >
              <div class="firm-item"  v-for="(item,index) in firm" :key="index">
                <div class="firm-text">{{item.text}}</div>
              </div>
            </div>
            <div class="dynamic-title">行业动态</div>
            <div class="dynamic-item" v-for="(item,index) in dynamic" :key="index">
                <div class="dynamic-text">{{item.text}}</div>
                <div class="dynamic-date">{{item.date}}</div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      listdata:[
        {
          text:"云计算",
        },
        {
          text: "数据,  物联网人工智能",
        },
        {
          text:"项目管理",
        },
        {
          text:"虚拟化",
        },
        {
          text: "5G",
        },
       ],
      firm:[
        {text:"AWS"},
        {text:"微软Azure"},
        {text:"谷歌GCE"},
        {text:"IBMSoftlayer"},
        {text:"阿里云"},
        {text:"华为云"},
        {text:"腾讯云"},
      ],
      dynamic:[
        {
          text:"上海市某政府机关2020年度公务员考录现场招聘会",
          date:"2019-10-31"
        },
        {
          text:"职场社交带动消费升级 80、90后最易被同事“种草”",
          date:"2019-10-31"
        },
        {
          text:"你的兴趣爱好是什么？别掉入面试官的陷阱里",
          date:"2019-10-31"
        },
        {
          text:"求职贴士：笔试技巧知多少",
          date:"2019-10-31"
        },
        {
          text:"简历投出去，很久没有反应怎么办？",
          date:"2019-10-31"
        },
        {
          text:"注意！谈工资之前你需要了解的那些事！",
          date:"2019-10-31"
        },
      ]
    }
  }
}
</script>
<style lang="stylus">
.tenke
  .content-wrap
    width: 1200px;
    background-color: #ffffff; 
    margin-left 120px
    margin-top 20px
    padding 40px 40px 39px 40px
    .title
      font-size: 28px;
      color: #1b1b1b;
      display flex
      justify-content space-between
      margin-bottom 40px
      .title-text
        font-family: MicrosoftYaHeiLight;
        font-size: 12px;
        color: #666666;
    .conetnt-wrap
        display flex
        .list
          width: 240px;
          height: 404px;
          margin-right 39px
          border: solid 1px #dcdcdc;
          .list-content
            width 240px
            border-bottom solid 1px #dcdcdc;
            padding-bottom 17px
            padding 17px 20px 
            font-family: MicrosoftYaHei-Bold;
            font-size: 16px;
            font-weight: bold;
            color: #333333;
          .list-content:active
            color: #ffffff;
            background-color: #db0801;
        .details-title
          font-size: 24px;
          color: #1b1b1b;
          margin-bottom 40px;
        .details-item01
          width: 830px;
          font-size: 14px;
          line-height: 24px;
          color: #666666;
          margin-bottom 74px
        .firm-title
          font-size: 24px;
          color: #1b1b1b;
          margin-bottom 26px;
        .firm-text-wrap
          display flex
          flex-wrap wrap
        .firm-item
          .firm-text 
            width: 195px;
            height: 50px;
            font-size: 14px;
            line-height: 50px;
            letter-spacing: 0px;
            text-align center
            color: #ffffff;
            background-color: #646464;
            margin-right 20px
            margin-bottom 20px
          .firm-text:hover
            background-color: #db0801;
        .dynamic-title
          font-size: 24px;
          color: #1b1b1b;
          margin-bottom 39px;
          margin-top 70px
        .dynamic-item
          display flex
          justify-content space-between
          border-bottom dashed 1px #dcdcdc
          padding-bottom 20px
          padding-top 20px
          .dynamic-text
            font-size: 16px;
            color: #333333;
          .dynamic-date
            font-size: 14px;
            color: #666666;
                  

</style>